<button class="btn btn-outline-secondary" :disabled="!selectedIds.length"
        @click="handleBatchCategoryOpen()">批量设置分类
</button>
<div v-if="typeof filter.batch_category !== 'undefined'">
  <el-dialog title="设置分类" :visible.sync="filter.batch_category.dialog.dialogFormVisible">
    <el-form ref="categoriesTreeForm" label-position="top" :model="filter.batch_category" label-width="100px">
      <el-form-item>
        <el-tree
          ref="categories_tree"
          :data="filter.batch_category.categories_tree"
          show-checkbox
          :check-strictly="true"
          node-key="id"
          :props="{children: 'children',label: 'name'}"
          @check-change="handleBatchCategoryChange"
        >
        </el-tree>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="filter.batch_category.dialog.dialogFormVisible = false">{{ __('common.cancel') }}</el-button>
      <el-button type="primary" @click="saveBatchCategories">{{ __('common.confirm') }}</el-button>
    </div>
  </el-dialog>
</div>
</el-dialog>
@push("footer")
  <script>
    $(function () {
      app.$set(app.filter, "batch_category", {
        "categories_tree":@json($categories_tree),
        "dialog": {
          "dialogFormVisible": false,
        },
        "choose_categories_new": [],
      });

      app.handleBatchCategoryOpen = function () {
        app.filter.batch_category.dialog.dialogFormVisible = true;
      };

      app.handleBatchCategoryChange = function (data, checked, indeterminate) {
        var treeKeys = app.$refs.categories_tree.getCheckedKeys()
        app.filter.batch_category.choose_categories_new = treeKeys;
      };
      app.saveBatchCategories = function () {
        console.log(app.filter.batch_category.choose_categories_new);
        console.log(app.selectedIds);
        $http.put("{{admin_route('product_category.batch_setting')}}", {
          ids: app.selectedIds,
          categories: app.filter.batch_category.choose_categories_new
        }).then((res) => {
          app.filter.batch_category.dialog.dialogFormVisible = false;
          layer.msg(res.message)
        })
      }
    });
  </script>
@endpush
